<template>
  <div>
    <div class="index_charts">

      <div class="charts_left">
        <div class="title">{{ chartData.category }}</div>
        <div>
          <div>申报人数</div>
          <div style="color:aqua; font-size: 30px; font-weight: 600">{{ chartData.declarationTotal }}</div>
        </div>
        <div class="charts_left_bottom">
          <div>
            <div>待申报</div>
            <div>{{ chartData.declaredTotal }}</div>
          </div>
          <div>
            <div>申报中</div>
            <div>{{ chartData.declaringTotal }}</div>
          </div>
          <div>
            <div>已申报</div>
            <div>{{ chartData.toDeclareTotal }}</div>
          </div>
        </div>
      </div>
      <div class="charts_right">
        <div id="mycharts" ref="mychartsDom" />
      </div>
    </div>
  </div>
</template>
<script>

export default {
  props: { //
    chartData: { // 整个组件需要的数据
      type: String,
      default: ''
    }
  },

  data() {
    return {}
  },
  watch: {
    chartData: { // 深度监听 父传子的数据
      handler(newVal) {
        if (newVal) {
          this.makeLineChart()// 数据有变化 绘制图标
        }
      },
      deep: true
    }
  },
  created() {

  },
  mounted() {
    this.makeLineChart()
  },
  methods: {
    makeLineChart() {
      // 1 获取echarts 操作实例
      const mycharts = this.$echarts.init(this.$refs.mychartsDom)

      // 2.准备配置项
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.chartData.yAxis,
            type: 'line',
            symbol: 'none', // emptyCircle 空心圆
            itemStyle: {
              color: '#00ff00'
            },
            areaStyle: { // 区域填充样式
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(255,255,255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(0,255,0, 0)'
                }
              ])

            }
          }
        ]
      }
      // 3.将配置项 设置给操作实例
      mycharts.setOption(option)
    }
  }
}

</script>
<style lang="scss">
  .index_charts{
    width: 1150px;
    height: 400px;
    background: white;
    display: flex;
    margin-top: 20px;
      .title{
        margin-left: 20px;
        font-size: 25px;
      }
      .charts_left_bottom{
        width: 300px;
        height: 200px;
        background: #e5e5e5;
        display: flex;
        flex-wrap: wrap;

        align-items: center;
        >div{
          width: 150px;
          height: 90px;
          text-align: center;
          font-size: 20px;
        }
      }
  }
#mycharts{
  width: 700px;
  height: 290px;
  // background: darkblue;
  margin-top: 20px;
  margin-left: 20px;
}
</style>
